<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title></title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/Swiper/3.4.0/css/swiper.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/animate.css/3.5.2/animate.min.css"/>
    <style>
     *{margin: 0;padding: 0}
     html,body{height: 100%;overflow: hidden}
     .swiper-container{width: 100%;height: 100%;}
     .swiper-pagination{height: 200px}
     .swiper-pagination span{background: #eee;width: 15px;height: 15px;margin: 15px 0!important;}
     .swiper-pagination-bullet-active{box-shadow: 0 0 10px #000;background: #eee!important;transform: scale(1.2)}
      a,button,input,optgroup,select,textarea,span,div {-webkit-tap-highlight-color:rgba(0,0,0,0); }
      input, textarea{-webkit-appearance: none;}
     .swiper-slide{
         text-align: center;
         font-size: 38px;
         color: #fff;
         font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
         /* Center slide text vertically */
         display: -webkit-box;
         display: -ms-flexbox;
         display: -webkit-flex;
         display: flex;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         -webkit-justify-content: center;
         justify-content: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
         -webkit-align-items: center;
         align-items: center;
        }
        .nav-box{width: 100%;height: 50px;background: rgba(0,0,0,1);position: fixed;top: 0;z-index: 10000}
        .nav-box li{float: left;list-style: none;margin-left: 20px}
        .nav-box li a{text-decoration: none;color: #fff;}
        .active{color: red!important;}



    </style>
</head>
<body>
<div class="nav-box">
    <ul class="nav">
        <li><a href="#" class="active">傻条子1</a></li>
        <li><a href="#">傻条子2</a></li>
        <li><a href="#">傻条子3</a></li>
        <li><a href="#">傻条子4</a></li>
        <li><a href="#">傻条子5</a></li>
    </ul>

</div>

<div class="swiper-container">

    <div class="swiper-wrapper">

       <div class="swiper-slide" style="width: 100%;height: 100%;background: #007aff" id="s1">
           <p class="ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0">条</p>
       </div>
       <div class="swiper-slide" style="width: 100%;height: 100%;background: #0086d5" id="s2">
           <p class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">子</p>
       </div>
       <div class="swiper-slide" style="width: 100%;height: 100%;background: #3399ff" id="s3">
           <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">没</p>
       </div>
       <div class="swiper-slide" style="width: 100%;height: 100%;background: #0099cc" id="s4">
           <p class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">鸡</p>
       </div>
       <div class="swiper-slide" style="width: 100%;height: 100%;background: #00b4d1" id="s5">
           <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">鸡</p>
       </div>
    </div>
    <div class="swiper-pagination"></div>
</div>

</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://cdn.staticfile.org/Swiper/3.4.0/js/swiper.jquery.min.js"></script>
<script>
    //本插件由www.swiper.com.cn提供
function swiperAnimateCache(){for(allBoxes=window.document.documentElement.querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["style"]?allBoxes[i].setAttribute("swiper-animate-style-cache",allBoxes[i].attributes["style"].value):allBoxes[i].setAttribute("swiper-animate-style-cache"," "),allBoxes[i].style.visibility="hidden"}function swiperAnimate(a){clearSwiperAnimate();var b=a.slides[a.activeIndex].querySelectorAll(".ani");for(i=0;i<b.length;i++)b[i].style.visibility="visible",effect=b[i].attributes["swiper-animate-effect"]?b[i].attributes["swiper-animate-effect"].value:"",b[i].className=b[i].className+"  "+effect+" "+"animated",style=b[i].attributes["style"].value,duration=b[i].attributes["swiper-animate-duration"]?b[i].attributes["swiper-animate-duration"].value:"",duration&&(style=style+"animation-duration:"+duration+";-webkit-animation-duration:"+duration+";"),delay=b[i].attributes["swiper-animate-delay"]?b[i].attributes["swiper-animate-delay"].value:"",delay&&(style=style+"animation-delay:"+delay+";-webkit-animation-delay:"+delay+";"),b[i].setAttribute("style",style)}function clearSwiperAnimate(){for(allBoxes=window.document.documentElement.querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["swiper-animate-style-cache"]&&allBoxes[i].setAttribute("style",allBoxes[i].attributes["swiper-animate-style-cache"].value),allBoxes[i].style.visibility="hidden",allBoxes[i].className=allBoxes[i].className.replace("animated"," "),allBoxes[i].attributes["swiper-animate-effect"]&&(effect=allBoxes[i].attributes["swiper-animate-effect"].value,allBoxes[i].className=allBoxes[i].className.replace(effect," "))}
</script>
<script>
    $('.nav li').click(function(){
        var index = $(this).index();
        $('.nav li').find('a').removeClass('active');
        $(this).find('a').addClass('active');
        swiper.slideTo(index, 500, true);//切换到第一个slide，速度为1秒
    });
    var nav_a =  $('.nav li a');
    var swiper = new Swiper('.swiper-container', {
        pagination : '.swiper-pagination',
        mousewheelControl : true,
        uniqueNavElements :false,
        paginationClickable :true,
        resistanceRatio:0,
        direction:'vertical',

        onTransitionEnd: function(swiper){
            nav_a.removeClass('active');
            nav_a.eq(swiper.activeIndex).addClass('active');
//            $('.swiper-slide').css('transform','rotateY('+swiper.progress*10+'deg)')
        },
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素
            swiperAnimate(swiper); //初始化完成开始动画
        },
        onSlideChangeEnd: function(swiper){
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
        }
    });

</script>

</html>